.user-behavior-container {
  padding: 0;
  background: #f5f7fa;
  min-height: calc(100vh - 64px);

  // 数据总览大卡片
  .data-overview-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;

    .ant-card-body {
      padding: 24px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }

    .overview-section {
      margin-bottom: 32px;

      .overview-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: #fafafa;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          background: #f0f0f0;
        }

        .overview-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #fff;
          flex-shrink: 0;
        }

        .overview-info {
          flex: 1;
          min-width: 0;

          .overview-title {
            font-size: 12px;
            color: #8c8c8c;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .overview-value {
            font-size: 20px;
            font-weight: 600;
            color: #262626;
          }
        }
      }
    }

    .trend-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;

      .section-title {
        flex-shrink: 0;
      }

      .trend-chart {
        flex: 1;
        min-height: 300px;
      }
    }
  }

  // 右侧面板容器
  .right-panel-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
  }

  // 今日统计卡片
  .stats-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .ant-card-body {
      padding: 24px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }

    .stats-list {
      display: flex;
      flex-direction: column;
      gap: 24px;

      .stat-item {
        .stat-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .stat-name {
            font-size: 14px;
            color: #8c8c8c;
          }

          .stat-value {
            font-size: 16px;
            font-weight: 600;
            color: #262626;
          }
        }

        .ant-progress {
          .ant-progress-bg {
            border-radius: 4px;
          }
        }
      }
    }
  }

  // 雷达图卡片
  .radar-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex: 1;

    .ant-card-body {
      padding: 24px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }
  }

  // 图表卡片
  .chart-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    height: 100%;

    .ant-card-head {
      border-bottom: 1px solid #f0f0f0;

      .ant-card-head-title {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
    }

    .ant-card-body {
      padding: 24px;
    }
  }

  // 指标卡片
  .metric-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .ant-card-body {
      padding: 24px;
    }

    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .metric-title {
        font-size: 14px;
        color: #8c8c8c;
      }

      .metric-trend {
        font-size: 12px;
        font-weight: 500;

        &.up {
          color: #ff4d4f;
        }

        &.down {
          color: #52c41a;
        }
      }
    }

    .metric-value {
      font-size: 32px;
      font-weight: 600;
      color: #262626;
      margin-bottom: 20px;
    }

    .metric-chart {
      height: 80px;
    }
  }

  // 响应式设计
  @media (max-width: 1200px) {
    .data-overview-card {
      .overview-section {
        .overview-item {
          .overview-icon {
            width: 40px;
            height: 40px;
            font-size: 18px;
          }

          .overview-info {
            .overview-value {
              font-size: 18px;
            }
          }
        }
      }
    }

    .stats-card {
      .stats-list {
        gap: 20px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 16px;

    .data-overview-card,
    .right-panel-card {
      .ant-card-body {
        padding: 16px;
      }

      .section-title {
        font-size: 14px;
        margin-bottom: 16px;
      }
    }

    .data-overview-card {
      .overview-section {
        margin-bottom: 24px;

        .overview-item {
          padding: 12px;

          .overview-icon {
            width: 40px;
            height: 40px;
            font-size: 18px;
          }

          .overview-info {
            .overview-value {
              font-size: 18px;
            }
          }
        }
      }
    }

    .right-panel-wrapper {
      gap: 12px;
    }

    .stats-card,
    .radar-card {
      .ant-card-body {
        padding: 16px;
      }

      .section-title {
        font-size: 14px;
        margin-bottom: 16px;
      }
    }

    .metric-card {
      .metric-value {
        font-size: 24px;
      }
    }

    .chart-card {
      .ant-card-body {
        padding: 16px;
      }
    }
  }
}
